
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link></div>
          --><div class="hei10"></div>

				<div class="o_ul">
					<router-link class="o_li" to="/productionBasismanag">产品渠道中心</router-link>
					<router-link class="o_li  acts bgw" v-if="checkquanxian('P010102').length > 0" to="/productionBasismanag/productionBasismanagSoldout">已下架的产品</router-link>
					<router-link class="o_li" v-if="checkquanxian('P010103').length > 0" to="/productionBasismanag/productionBasismanagDj">自动生产对接</router-link>
				</div>
				<div class="bsm">
					<el-form ref="form" @submit.native.prevent :model="form" label-width="80px">
						<div class="cpflex">
							<el-form-item label="产品名称" class="bgh" style="margin-right: 20px;">
								<el-input v-model="title" placeholder="请输入产品名称"></el-input>
							</el-form-item>
							<el-form-item label="产品编码" class="bgh" style="margin-right: 20px;">
								<el-input v-model="sku" placeholder="请输入产品编码"></el-input>
							</el-form-item>
							<el-button type="danger" round @click="search" style="margin-left:20px;">搜索
							</el-button>

							<!-- <el-button type="danger" plain size="mini" @click="daochu" style="margin-left:20px;">导出</el-button> -->
						</div>


					</el-form>
					<!-- <div class="row2">
						<el-button type="danger" @click="goto">新增产品（渠道）</el-button>
					</div> -->
				</div>

				<div class="con">
          <el-table :data="list" style="text-align: center;" align="center" border :loading="loading" :header-cell-style="{
                        background:'#F4F4F4',
                        color:'#7D8087'}">
                      <el-table-column label="产品名称" align="center" width="300" >
                        <template slot-scope="scope">
                          <span>{{ scope.row.name }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="产品编码" align="center" width="300" >
                        <template slot-scope="scope">
                          <span>{{ scope.row.sku }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="运营商" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.operator }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="生产方式" align="center">
                        <template slot-scope="scope">
                          {{scope.row.is_auto_produce}}
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.created_at }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="库存数" align="center">
                        <template slot-scope="scope">
                          {{scope.row.stock}}
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" align="center" >
                        <template slot-scope="scope">
                          <el-button type="text" v-if="P0102" size="mini" @click="soldin(scope.row.id)">上架</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
          <el-pagination background layout="total, prev, pager, next" style="text-align: right; margin: 20px;" prev-text="上一页" next-text="下一页" :current-page="page" @current-change="fanye"
          					:page-size="pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>

		<!-- <foot></foot> -->
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'


	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'productionBasismanagSoldout',
		data() {
			return {
				mashangloading: false,
				mashangqudaoid: "",
				mashangqudao: "",
				mashanglog: false,
				mashang: {
					// upstream_product_name:"",
					// upstream_account:"",
					// params:{
					// 	description:"",
					// 	value:"",
					// 	key:""
					// }
				},
				id: "",

				form: {},
				list: "",
				title: "",
				sku: "",
				loading: true,

				chooseid: "",
				is_auto_producelog: false,
				is_auto_produce: '0',

				total: 0,
				page: 1,
				pagesize: 20,

				fixstocklog: false,
				stock: "",
				stocklist: "",
				kucunkanbukan: false,
				P0102:false
			}
		},
		created() {
			//按回车键搜索
			var that = this
			document.onkeydown = function(e) {
				var ev = document.all ? window.event : e;
				if (ev.keyCode == 13) {
					that.search()
				}
			}

			this.getpro()
			// this.mashanggetqudao()

			//权限问题
			var user = JSON.parse(localStorage.getItem('USER'));
			this.user_func = user.functions
			for( var i in this.user_func){
			    var func_number = this.user_func[i].code
			    if(func_number.indexOf("P0102") >= 0){ this.P0102 = true }
			}
		},

		methods: {
			soldin(id) {
				this.$confirm('您真的要上架该产品吗?', '温馨提示', {
					confirmButtonText: '开心上架',
					cancelButtonText: '我再想想',
				}).then(() => {
					var that = this;
					console.log(id);
					var formData = new FormData();
					formData.append("product_id", id);
					formData.append("status", 100);
					axios.post('/api/plan-market/put/product', formData)
						.then(response => {
							if (response.data.msg.code == 0) {
								this.$message.success('上架成功')
								this.loading = true
								this.getpro()
							} else {
								if (response.data.msg.code == 50401) {
									that.$router.push({
										path: "/login"
									});
									return false
								}
								that.$message.error(response.data.msg.info);
							}
						})
				}).catch(() => {
					// this.$message({
					//   type: 'info',
					//   message: '已取消操作'
					// });
				});
			},
			gomoneyset: function(id) {
				this.$router.push({
					path: '/productionBasismanag/moneyset',
					query: {
						id: id
					}
				})
			},
			godaliang: function(id) {
				this.$router.push({
					path: '/daliangset',
					query: {
						id: id
					}
				})
			},
			//码上购相关
			//获取所有渠道
			mashanggetqudao: function() {
				var that = this
				axios.get('/api/plan-market/product/upstreams')
					.then(response => {
						if (response.data.msg.code == 0) {
							that.mashangqudao = response.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			mashangchange: function() {
				this.mashangloading = true
				var that = this
				axios.get('/api/plan-market/upstream/product?product_id=' + this.id + '&upstream_account=' + this
						.mashangqudaoid)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.mashang = response.data.data
							that.mashangloading = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//根据id和渠道获取字段
			mashangget: function(id) {
				this.id = id
				this.mashangloading = true
				this.mashanglog = true
				var that = this
				axios.get('/api/plan-market/upstream/product?product_id=' + this.id)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.mashang = response.data.data
							that.mashangqudaoid = response.data.data.upstream_account
							that.mashangloading = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})

			},
			//保存
			mashanggo: function() {
				var that = this
				var obj = {
					product_id: this.id,
					upstream_account: this.mashangqudaoid,
					upstream_product_name: this.mashang.upstream_product_name
				}
				for (var i in this.mashang.params) {
					obj[this.mashang.params[i].key] = this.mashang.params[i].value
				}
				axios.post('/api/plan-market/upstream/product', obj)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.loading = true
							that.getpro()
							that.mashanglog = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			// 修改库存
			stockgo: function() {
				var that = this
				axios.post('/api/plan-market/stock/manage', {
						stock: this.stock,
						product_id: this.chooseid
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.getstock()
							that.getpro()
							that.fixstocklog = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//获取库存
			getstock: function() {
				var that = this
				axios.get('/api/plan-market/stock/logs?product_id=' + this.chooseid)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.stocklist = response.data.data.data
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//点击修改库存
			changestock: function(id, stock) {
				this.kucunkanbukan = false
				this.chooseid = id
				this.stock = stock
				this.getstock()
				this.fixstocklog = true
			},
			//自动生产？
			is_auto: function() {
				console.log(this.is_auto_produce)
				var that = this;
				if (this.is_auto_produce == 1) {
					axios.get('/api/plan-market/product/auto?product_id=' + this.chooseid)
						.then(response => {
							if (response.data.msg.code == 0) {
								if (response.data.data != null) {

								} else {
									this.is_auto_produce = '0'
									that.$message.error("该产品未开发自动生产模块，请联系您的客服寻求支持！");
								}
							} else {
								that.$message.error(response.data.msg.info);
							}
						})
				}
			},
			goto: function() {
				this.$router.push({
					path: '/productionBasismanag/addBasis',
				})
			},
			//查看关联
			see: function(id, name) {
				this.$router.push({
					path: '/productionBasis',
					query: {
						id: id,
						name: name
					}
				})
			},
			//查看详情
			detail(id) {
				window.open(window.location.origin +  window.location.pathname + "#/productionBasismanag/detailproduct?id=" + id)
			},
			//跳转到修改页面
			go: function(id) {
				this.$router.push({
					path: '/productionBasismanag/fixproductionBasis',
					query: {
						id: id
					}
				})
			},
			//修改生产方式
			changeis_auto_produce: function(id) {
				this.chooseid = id
				this.is_auto_producelog = true
			},
			changeis_auto_producego: function() {
				this.loading = true
				var that = this;
				axios.post('/api/plan-market/product/edit', {
						is_auto_produce: this.is_auto_produce,
						product_id: this.chooseid
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.getpro()
							that.$message.success("修改成功");
							that.is_auto_producelog = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getpro()
			},
			daochu: function() {
				var url = '/api/gth/products/list/export?sku=' + this.sku + '&name=' + encodeURIComponent(this
					.title)
				location.href = url
			},
			//搜索
			search: function() {
				this.page = 1
				this.loading = true
				this.getpro()
			},
			//获取商品
			getpro: function() {
				this.title = this.title.trim()
				var that = this;
				axios.get('/api/gth/products/list?status=0&order_by=0&page=' + this.page + '&page_size=' + this
						.pagesize + '&sku=' + this.sku + '&name=' + encodeURIComponent(this.title))
					.then(response => {
						if (response.data.msg.code == 0) {
							for (var i in response.data.data.data) {
								if (response.data.data.data[i].is_auto_produce == 0) {
									response.data.data.data[i].is_auto_produce = "手动生产"
								}
								if (response.data.data.data[i].is_auto_produce == 1) {
									response.data.data.data[i].is_auto_produce = "自动生产"
								}
								// if (response.data.data.data[i].operator == 10086) {
								// 	response.data.data.data[i].operator = "移动"
								// }
								// if (response.data.data.data[i].operator == 10010) {
								// 	response.data.data.data[i].operator = "联通"
								// }
								// if (response.data.data.data[i].operator == 10000) {
								// 	response.data.data.data[i].operator = "电信"
								// }
                if (response.data.data.data[i].operator == 10099) {
                	response.data.data.data[i].operator = "广电"
                }
							}
							that.total = response.data.data.total
							that.list = response.data.data.data
							that.loading = false
						} else {
							if (response.data.msg.code == 50401) {
								that.$router.push({
									path: "/login"
								});
								return false
							}
							that.$message.error(response.data.msg.info);
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
	.index {
    /deep/ .el-select{min-width: 250px; max-width: 100%; margin-right: 20px;}
    /deep/ .el-input{min-width: 250px; max-width: 100%; margin-right: 20px;}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250); border: 0;}
    /deep/ .el-range-editor .el-range-input { background: #f7f8fa;}
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--text{ padding: 11px 0 !important;}
    /deep/ .el-button--danger.is-plain {
        color: #FFF;
        background-color: #2974FF !important;
        border-color: #2974FF !important;
    }

    /deep/ .el-input__inner:-moz-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
        color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
        color: rgb(140, 140, 140);
    }
    /deep/ .td2 .el-button{ padding: 11px 0px !important;}

    /deep/ .pagination-container .el-select{width: 120px; margin-right: 20px;}
    /deep/ .pagination-container .el-input{width: 120px; margin-right: 20px;}
    /deep/ .pagination-container .el-input__inner{line-height: 28px; height: 28px;}
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

		.see {
			color: #409EFF;
			margin: 20px 0;
			cursor: pointer;
		}

		.cpflex {
			display: flex;
			flex-wrap: wrap;

			.el-form-item {
				margin-bottom: 0px;
			}
		}

		.kucun {
			.el-input {
				width: 200px;
			}

			.list {
				display: flex;
				text-align: center;


				.bor1 {
					border-right: 1px #EAEAEA solid;

					i {
						color: #409EFF;
						font-size: 14px;
						margin-left: 10px;
						cursor: pointer;
					}
				}

				.th {
					background: #F9F9F9;
					line-height: 45px;
					flex: 1;
					font-size: 14px;
					box-sizing: border-box;
				}

				.td {
					line-height: 45px;
					font-size: 14px;
					flex: 1;
					box-sizing: border-box;
					color: #666;
				}

				.td2 {
					flex: 1.5
				}
			}
		}



				.o_ul {
					background: #F9F9F9;
					display: flex;

					.o_li {
						flex-basis: 160px;
						line-height: 45px;
						display: block;
						color: #727272;
						border-top: 3px #F9F9F9 solid;
						font-size: 14px;
						text-align: center;
					}

					.act {
						border-top: 3px #DD2727 solid;
						background: #FFFFFF;
					}
				}

				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}

				.bsm {
					padding: 20px 20px 0 20px;

					.el-input {
						width: 220px;
					}
				}

				.row2 {
					color: #FFF;
					margin-top: 20px;

					a {
						color: #FFF;
					}
				}

				.con {
					margin: 20px;


					.list {
						display: flex;
						text-align: center;
						border-bottom: 1px #EAEAEA solid;

						.bor1 {
							border-right: 1px #EAEAEA solid;

							i {
								color: #409EFF;
								font-size: 14px;
								margin-left: 10px;
								cursor: pointer;
							}
						}

						.th {
							background: #F9F9F9;
							line-height: 45px;
							flex: 1;
							font-size: 14px;
							box-sizing: border-box;
						}

						.td {
							line-height: 45px;
							font-size: 14px;
							flex: 1;
							box-sizing: border-box;
							color: #666;
						}

						.td2 {
							flex: 1.5
						}
					}
				}

				/deep/ .el-pagination {
					text-align: right;
					margin-right: 20px;
					padding-bottom: 50px;
				}


	}
</style>
